<template>
  <div :class="'pop-upGw'+data.stage">
   <div class="img_up">
     <div class="pop_name">{{ data.name }}</div>
     <div>
        <!-- <div v-for="item1 in dataData" :key="item1.id">
          {{ item1.name }}:
        </div> -->
    
        <!-- <div v-for="(item,key) in dataZd" :key="key">
            <div v-if="item.sn==data.archiveid.slice(5)" class="pop_value">
              {{ item.name }}: {{ item.v }}
            </div>
        </div> -->

      <!-- </div> -->

      <!-- <div v-for="item in PropData" :key="item.key">
       {{ item.label }}:{{ item.v }}
      </div> -->
<!-- {{ dataGw1 }} -->
     
      <!-- <div v-for="item in dataGw1" :key="item.key"> -->
        <!-- <div v-if="item.sn==data.archiveid.slice(5)" class="pop_value"> -->
        <!-- {{ item.label }}: -->
        <!-- {{ item.v }} -->
        <!-- <div v-if="item.sn==data.archiveid.slice(5)" class="pop_value"> -->
      <!-- </div> -->
      <!-- {{ data.monititems }} -->



      <!-- <div v-for="(item,key) in dataGw" :key="key">

          <div v-if="item.sn==data.archiveid.slice(5)" class="pop_value">
            
            {{ item.target }}： {{ item.v }}
          </div>
      </div> -->

<!-- {{dataGw1  }} -->
      <div v-for="(item,index) in dataArr" :key="index">
        <div class="pop_value">
            {{ item.aTitle }}：{{ item.aValue?item.aValue:'--'+item.aUnit }}
          </div>
      </div>
     
     </div>
   </div>
 </div>
</template>

<script setup>
import { defineProps,ref } from 'vue';
import bus from '../../tools/eventBus'
const dataGw=ref({})
const dataData=ref(
  [
    {name:'浊度',id:1},
    {name:'PH',id:2},
    {name:'余氯',id:3},
  ]
)

const dataZd=ref([
  {name:'浊度',id:"A15"},
  {name:'PH',id:"A14"},
  {name:'化氯',id:"A13"},
])

const PropData=ref([])

const dataGw1=ref({})
const dataGw2=ref([])
const dataArr=ref({})



const props = defineProps({
 data: {
   type: Object,
   default: () => ({})  // 给 data 一个默认的空对象
 },
 position: Object
});

// 流量压力水质实时数据
bus.on('realTime', (data) => {
if (data.deptName == '管网' && data.target!=='日供水量') {
  SsData(data)
  // propsData(data)
  // 调用处理函数  
  // processData(data);
 
}
})

// propsData()
// 创建一个函数来格式化数字并添加单位
function ensureUnit(value, unit) {
    if (typeof value === 'number') {
        return `${value}${unit}`;
    } else if (typeof value === 'string') {
        // 检查是否已经包含单位
        if (!value.endsWith(unit)) {
            return `${value}${unit}`;
        }
        return value;
    }
    return value;  // 如果不是数字或字符串，直接返回原值
}

function processUnit(data){
  let valueTarget=''
  if(data.target!=='二氧化氯') valueTarget=data.target.slice(-2)
  switch(valueTarget){
    case '浊度':
    data.v=ensureUnit(data.v,'NTU')
    break;
    case '化氯':
    data.v=ensureUnit(data.v,'mg/L')
    break;
    case '流量':
    data.v=ensureUnit(data.v,'m³/h') 
    break;
    case '压力':
    data.v=ensureUnit(data.v,'MPa') 
    break;
  }
}

// 值为空时附上单位
function processUnit1(data){
  switch(data){
    case '浊度':
    return 'NTU'
    break;
    case '二氧化氯':
    return 'mg/L'
    break;
    case '流量':
    case '瞬时':
    return 'm³/h'
    break;
    case '压力':
    return 'MPa'
    break;
  default:
    return ''
  }
}




// 初始化加载list列表
propsArr()
function propsArr(){
  const a= props.data.monititems.split(',')
  
  const b = a.filter((item) => {
    if (['压力', '瞬时', '瞬时流量', '浊度', 'pH', '二氧化氯'].includes(item.split(':')[1])) {
     return item.split(':')[0];
    }
  });

  b.forEach((item)=>{
    const Bq=item.split(':')[0]
    const BqValue=item.split(':')[1]
    console.log(BqValue,'BqValue');

    let propsId=''  
    if (props.data.archiveid.includes("HD72_")) {
        propsId = props.data.archiveid.replace("HD72_", "");
        
    } else {
        propsId=props.data.archiveid
    }

    const key = `${propsId}_${Bq}`;
      // 如果 dataArr.value 中已经存在该键，则覆盖，没有这添加键值对
      if (dataArr.value[key]) {
          dataArr.value[key] = {aTitle:BqValue,aUnit:processUnit1(BqValue)};
      } else {
          dataArr.value[key] = {aTitle:BqValue,aUnit:processUnit1(BqValue)};
      }
  })  

  // console.log('dataArr.value',dataArr.value);
  
}


// 实时数据对应list列表--dataArr.value
function SsData(SsData){
  processUnit(SsData) // 添加单位
  const SsDataKey = `${SsData.sn}_${SsData.pointId}`;
  for (let key1 in dataArr.value) {
    if (dataArr.value.hasOwnProperty(key1)) {
        if(key1==SsDataKey) dataArr.value[key1]={...dataArr.value[key1],aValue:SsData.v}
         }
       }
}


function propsData(SsData){

  const SsDataKey = `${SsData.sn}_${SsData.pointId}`;


  const a= props.data.monititems.split(',')
  
  const b= a.filter((item)=>{
    if(item.split(':')[1]=='压力' || item.split(':')[1]=='瞬时'|| item.split(':')[1]=='瞬时流量'|| item.split(':')[1]=='浊度'|| item.split(':')[1]=='pH'|| item.split(':')[1]=='二氧化氯'){
      return item.split(':')[0]
    }
    
  })

b.forEach((item)=>{
  const Bq=item.split(':')[0]
  const BqValue=item.split(':')[1]
  console.log(BqValue,'BqValue');

  let propsId=''  
  if (props.data.archiveid.includes("HD72_")) {
       propsId = props.data.archiveid.replace("HD72_", "");
      
  } else {
      propsId=props.data.archiveid
  }

  const key = `${propsId}_${Bq}`;

  // console.log(key,SsDataKey,'ddddddd');
  
 
  // 如果 dataStore 中已经存在该键，则覆盖

    if (dataGw1.value[key]) {
        // dataGw1.value[key] = props.data; 
        if(key==SsDataKey){
          console.log('执行1',key,SsDataKey,'SsData.v',SsData.v);
          // dataGw1.value[key].aaa=SsData.v
        for (let key1 in dataGw1.value) {
          if (dataGw1.value.hasOwnProperty(key1)) {
            console.log('执行2',key,SsDataKey,'SsData.v',SsData.v);
            // console.log("Value:", dataGw1.value[key1]);
            // if(SsDataKey==key1){
            //   key1.aaa=SsData.v
            if(key1==SsDataKey) dataGw1.value[key1]={aTitle:BqValue,aValue:SsData.v}


            console.log(dataGw1.value,'dataGw1.value');

            // SsData.v
            console.log('执行3',key,SsDataKey,'SsData.v',SsData.v);
            

            // }
         }
       }
        }
      
    } else {
      dataGw1.value[key] ={aTitle:BqValue,aValue:SsData.v}
        // props.data
        // if(key==SsDataKey){
        //   dataGw1.value[key].aaa=SsData.v
        //   // console.log(dataGw1.value,'dataGw1.value11111');
        // if(key=='22070_A13' || key=='22070_A14'){
        //   // console.log(key,"33333",'value:',SsData.v,'key:',dataGw1.value[key]);
          
        // }
        // }
    }
  
   
}) 
  

  


}


function processData(data){
  if(data.target!=='二氧化氯') data.target=data.target.slice(-2)
  switch(data.target.slice(-2)){
    case '浊度':
    data.v=ensureUnit(data.v,'NTU')
    break;
    case '化氯':
    data.v=ensureUnit(data.v,'mg/L')
    break;
    case '流量':
    data.v=ensureUnit(data.v,'m³/h') 
    break;
    case '压力':
    data.v=ensureUnit(data.v,'MPa') 
    break;
  }

  const key = `${data.pointId}_${data.sn}`;
    // 如果 dataStore 中已经存在该键，则覆盖
    if (dataGw.value[key]) {
        // console.log(`需要覆盖`,data);
        dataGw.value[key] = data;
    } else {
        // console.log(`添加该值`,data);
        dataGw.value[key] = data;
    }
  // console.log(dataGw.value,'dataGw.value');
  
}
</script>

<style scoped lang="scss">
.pop-upGw1 {
     position: absolute;
     padding: 16px;
     border-radius: 10px;
     height: 130px;
     bottom: 15px;
     left: -86px;
     width: 170px;
     min-width: 160px;
     font-size: 10px;
     background-image: url('/public/icon/气泡背景@3x.png');
     background-size: cover; /* 使背景图片覆盖整个元素 */
     background-repeat: no-repeat; /* 避免背景图片重复 */
}

.pop-upGw2 {
     position: absolute;
     padding: 16px;
     border-radius: 10px;
     height: 130px;
     bottom: 15px;
     left: -86px;
     width: 170px;
     min-width: 160px;
     font-size: 10px;
     background-image: url('/public/icon/气泡背景@3x.png');
     background-size: cover; /* 使背景图片覆盖整个元素 */
     background-repeat: no-repeat; /* 避免背景图片重复 */
}

.pop-upGw3 {
     position: absolute;
     padding: 16px;
     border-radius: 10px;
     height: 130px;
     bottom: 15px;
     left: -86px;
     width: 170px;
     min-width: 160px;
     font-size: 10px;
     background-image: url('/public/icon/气泡背景@3x.png');
     background-size: cover; /* 使背景图片覆盖整个元素 */
     background-repeat: no-repeat; /* 避免背景图片重复 */
}
   .pop_name{
     font-family: PingFangSC-Medium;
     font-size: 15px;
     color: #1A3352;
     font-weight: 500;
   }
   .pop_value{
     font-family: PingFangSC-Regular;
     font-size: 13px;
     color: #747B8B;
     line-height: 20px;
     font-weight: 400;
   }
</style>